<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
	<meta charset="UTF-8">
	<!-- Remove this line if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="HTML5 / CSS3 compliant project">
	<meta name="author" content="Jeremiah Bopko, Software Architect, Black Label Software Inc.">
	<title>Build a Drink</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="shortcut icon" type="image/png" href="favicon.png">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="res/css/style.css">
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>
<!-- Prompt IE 7 users to install Chrome Frame -->
<!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<div class="container">

	<header id="navtop">
		<a href="index.html" class="logo fleft">
			<img src="res/img/logo.png" alt="Designa Studio">
		</a>
		
		<nav class="fright">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
			</ul>
			<ul>
				<li><a href="works.html" class="navactive">Works</a></li>
				<li><a href="services.html">Services</a></li>
			</ul>
			<ul>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</header>


	<div class="work-page main grid-wrap">

		<header class="grid col-full">
			<hr>
			<h5 class="fleft">Build a Drink - Caffeine Calculator</h5>
		</header>
		<aside class="grid col-one-quarter mq2-col-one-third mq3-col-full">
			<p class="mbottom">The primary motivation for this project is to gain exposure into HTML5 and the user interface capability of jQuery.  Scroll down to the "DEMO" section to see the product in action.</p>
			<h6>Client</h6>
			<p class="halfmbottom">The Confused Basketcase Corporation Inc. (CBCI), a fictional corporation based in Mansfield, MA</p>
			
			<h6>Details</h6>
			<ul class="halfmbottom">
				<li>Design (Logo, UI, ...)</li>
				<li>Stolen graphics</li>
				<li>Incomplete implementation of caffeine calculation.</li>
			</ul>
			
			<h6>Technology</h6>
			<ul class="halfmbottom">
				<li>Object Oriented Design</li>
				<li>HTML5</li>
				<li>CSS3</li>
				<li>jQuery</li>
				<li>PHP</li>
				<li>Web Service Client</li>
			</ul>
			
			<h6>Links</h6>
			<ul class="mbottom">
				<li><a href="http://">Live website</a> - http://www.basketcase4me.com</li>
				<li><a href="http://">Project duration</a> - 6.4 Hours</li>
			</ul>
			
			<h6>Testimonial</h6>
			<blockquote>Thanks for the amazing work!  I was adequately caffeinated due to the information I gleaned from the CaffeineCalculator.  My husband and I are more than happy with the result</blockquote>
		</aside>
	
		<section class="grid col-three-quarters mq2-col-two-thirds mq3-col-full">
	
		<figure class="">
			<a href="#" >
			<img src="res/img/img.jpg" alt="" >
			</a>
			<figcaption>
				<p>Did you know that Caffeine is a naturally occurring pesticide?</p>
			</figcaption>
		</figure>
		
		<figure class="">
			<a href="#" >
			<img src="res/img/img2.jpg" alt="" >
			</a>
			<figcaption>
				<p>Death by caffeine overdose is extremely rare.</p>
			</figcaption>
		</figure>
	
		</section>	
		
		
		
<section class="works grid-wrap">
	<header class="grid col-full"><hr><p class="fleft">Demo the Caffeine Calculator</p><a href="works.html" class="arrow fright">project details</a></header>
	<article id="navtogg" class="grid col-full">
		<ul class="toggle-view">
			<li>
				<h5 class="toggle-title">Size <span class="toggle-title-detail">- Select a size for your tasty beverage</span></h5>
				<div class="toggle grid-wrap">                     
					<ul class="grid col-one-half mq3-col-full">
						<li>Short</li><li>Tall</li><li>Grande</li><li>Venti</li><li>Trenta</li>
					</ul>
				</div>       
			</li>
			<li>
				<h5 class="toggle-title">Form <span class="toggle-title-detail">- Select desired beverage</span></h5>
				<div class="toggle">
					<article id="navtabs" class="grid col-full">
						<div class="">
							<ul class="tabs clearfix">
								<li><a href="#tab1">Brewed Coffee</a></li><li><a href="#tab2">Esspresso</a></li><li><a href="#tab3">Frappuccino</a></li>
							</ul>
							<div class="tab_container">
							<article id="tab1" class="tab_content">
								<ol class="blocks blocks-four-up thumbs thumbs_popover">
								<li><a href="/coffee/blonde"><dl><dt><img src="//globalassets.starbucks.com/assets/5cbd9cd4476e495683f6f967561b9897.jpg" alt="Starbucks Veranda Blend�"></dt><dd class="type coffee profiles-type blonde">Blonde Roast</dd><dd><span>Subtle and mellow, the lighter roast perfected.</span></dd></dl></a></li>
								<li><a href="/coffee/medium"><dl><dt><img src="//globalassets.starbucks.com/assets/af472bbc384f4723af27dc0c4289d592.jpg" alt="Starbucks� Pike Place� Roast"></dt><dd class="type coffee profiles-type medium">Medium Roast</dd><dd><span>Smooth and balanced, some of our most beloved blends.</span></dd></dl></a></li>
								<li><a href="/coffee/dark"><dl><dt><img src="//globalassets.starbucks.com/assets/9af26af289e644e29b5fd8c3af172dec.jpg" alt="Starbucks� Fair Trade Certified� Italian Roast"></dt><dd class="type coffee profiles-type dark">Dark Roast</dd><dd><span>Bold and robust, these coffees built our reputation.</span></dd></dl></a></li>
								<li><a href="/coffee/flavored"><dl><dt><img src="//globalassets.starbucks.com/assets/c597f3914abe421c86aecd0b7b984f0e.png" alt="Natural Fusions Vanilla"></dt><dd class="type coffee profiles-type flavored">Flavored</dd><dd><span>Naturally flavored coffees for savoring.</span></dd></dl></a></li>
								<li><a href="/coffee/seasonal-favorites"><dl><dt><img src="//globalassets.starbucks.com/assets/3ba1f128c91e40318b2205a23d86ee5a.jpg" alt="Starbucks Three Region Blend"></dt><dd class="type coffee profiles-type seasonal-favorites">Seasonal Favorites</dd><dd><span>Each of these is a Starbucks tradition.</span></dd></dl></a></li>
							</ol>
							</article>					    
							<article id="tab2" class="tab_content">
<ol class="blocks blocks-three-up section_blocks">
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/macchiato-beverages">Macchiato</a></span></dt><dd class="image"><a href="/coffee/espresso/macchiato-beverages"><img src="//globalassets.starbucks.com/assets/46e54f51751d48a7914066ca802877ab.jpg" alt=""></a></dd><dd><p>A wonderful treat featuring layers of sweet drizzle, dense foam, rich espresso, steamed milk and an oh-so-sweet finish.</p></dd></dl></li>
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/latte-beverages">Latte</a></span></dt><dd class="image"><a href="/coffee/espresso/latte-beverages"><img src="//globalassets.starbucks.com/assets/9eed520f56284c97be8c3ef3f2fc65aa.jpg" alt="Latte"></a></dd><dd><p>Delicious espresso and steamed milk always blend perfectly with whatever flavors you desire to add.</p></dd></dl></li>
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/mocha-beverages">Mocha</a></span></dt><dd class="image"><a href="/coffee/espresso/mocha-beverages"><img src="//globalassets.starbucks.com/assets/5645b5447c0b49fd91e639a348432ec3.jpg" alt=""></a></dd><dd><p>Hot espresso and bittersweet chocolate melt together before mixing with steamed milk. A delicious treat.</p></dd></dl></li>
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/cappuccino-beverages">Cappuccino</a></span></dt><dd class="image"><a href="/coffee/espresso/cappuccino-beverages"><img src="//globalassets.starbucks.com/assets/609c6e24806e4154be5c6cb4351ae3cd.jpg" alt=""></a></dd><dd><p>Dark, rich espresso lies in wait under a smoothed and stretched layer of thick foam. It's truly the height of our baristas' craft.</p></dd></dl></li>
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/americano-beverages">Americano</a></span></dt><dd class="image"><a href="/coffee/espresso/americano-beverages"><img src="//globalassets.starbucks.com/assets/575d688ef21a43e78f734f8809a5baa5.jpg" alt="Americano"></a></dd><dd><p>A celebration of espresso flavor�hot water poured over rich espresso for a cup that is as deep and dark as the coffee bean itself.</p></dd></dl></li>
<li><dl><dt><span style="height: 26px;"><a href="/coffee/espresso/espresso-beverages">Espresso</a></span></dt><dd class="image"><a href="/coffee/espresso/espresso-beverages"><img src="//globalassets.starbucks.com/assets/ebf629f559324f2e950fa7c937f4f84f.jpg" alt=""></a></dd><dd><p>The heart and soul of all our espresso beverages. Each shot we pull has three distinct layers that create a deep, rich flavor.</p></dd></dl></li>
</ol>				    		
							</article>
					    
					    <article id="tab3" class="tab_content">
								<div class="grid-wrap">                     
									<ul class="grid col-one-half mq3-col-full">
										<li>Lorem ipsum</li>
										<li>Cras</li>
										<li>Dolor Euismod Cras</li>
										<li>Sit Amet</li>
										<li>Ornare Nullam Dolor</li> 
										<li>Consectetur</li>
									</ul>
									<ul class="grid col-one-half mq3-col-full fright">
										<li>Euismod Dapibus</li>
										<li>Magna</li>
										<li>Lorem Ligula Elit</li>
										<li>Dolor Vulputate</li>
										<li>Dapibus</li> 
										<li>Dolor Mattis Ipsum</li>
									</ul>
								</div>								
					    </article>
					 </div>
				  </div>
			</article>
								</div>       
							</li>
						</ul>
			</article>
				</section>
	</div> <!--main-->

<div class="divide-top">
	<footer class="grid-wrap">
		<ul class="grid col-one-third social">
			<li><a href="#">RSS</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Google+</a></li>
			<li><a href="#">Flickr</a></li>
		</ul>
	
		<div class="up grid col-one-third ">
			<a href="#navtop" title="Go back up">&uarr;</a>
		</div>
		
		<nav class="grid col-one-third ">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="works.html">Works</a></li>
				<li><a href="services.html">Services</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
	</footer>
</div>

</div>

<!-- Javascript - jQuery -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="res/js/jquery-1.7.2.min.js"><\/script>')</script>

<!--[if (gte IE 6)&(lte IE 8)]>
<script src="res/js/selectivizr.js"></script>
<![endif]-->

<script src="res/js/scripts.js"></script>

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID. -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>